ReactJS表单 |
您所在的位置：网站首页 › react 表单设计 › ReactJS表单 |
ReactJS表单
|
在本章中，我们将学习如何在React中使用表单。 简单的例子在下面的例子中，我们将设置一个值为{this.state.data}的输入表单。 这允许每当输入值改变时更新状态。使用onChange事件，将监听输入值的更改并相应地更新状态。 文件：App.jsx - import React from 'react'; class App extends React.Component { constructor(props) { super(props); this.state = { data: 'Initial data...' } this.updateState = this.updateState.bind(this); }; updateState(e) { this.setState({data: e.target.value}); } render() { return ( {this.state.data} ); } } export default App;文件：main.js - import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.jsx'; ReactDOM.render(, document.getElementById('app'));当输入文本值改变时，状态将被更新。 在下面的例子中，我们将看到如何使用子组件的表单。 onChange方法将触发状态更新，将会传递给子输入值并在屏幕上呈现。事件章节中使用了一个类似的例子。无论何时需要从子组件更新状态，都需要将处理更新的函数(updateState)作为prop(updateStateProp)传递。 文件：App.jsx - import React from 'react'; class App extends React.Component { constructor(props) { super(props); this.state = { data: 'Initial data...' } this.updateState = this.updateState.bind(this); }; updateState(e) { this.setState({data: e.target.value}); } render() { return ( ); } } class Content extends React.Component { render() { return ( {this.props.myDataProp} ); } } export default App;文件：main.js - import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.jsx'; ReactDOM.render(, document.getElementById('app'));这将产生以下结果 -
上一篇： ReactJS组件生命周期 下一篇： ReactJS事件 加QQ群啦，易百教程官方技术学习群 注意：建议每个人选自己的技术方向加群，同一个QQ最多限加 3 个群。 |
【本文地址】